<template>
	<view class="page">
		<u-navbar title="编辑公司" border @leftClick="$utils.back()" placeholder>
		</u-navbar>
		<view class="body" v-if='loading'>
			<view v-for="item in 30" style="height: 30rpx;margin-top: 20rpx;" :key="item" class="Skeleton" />
		</view>
		<view class="body" v-else>
			<scroll-view style="height: 100%;" scroll-y="true">
				<u--form labelWidth='100' labelPosition="top" :model="form" :rules="rules" ref="uForm">
					<u-form-item label="背景图:" prop="background" borderBottom>
						<imageUpload :imageUrl='background' @changeImageList='changeBack' />
					</u-form-item>
					<u-form-item label="logo:" prop="logo" borderBottom>
						<imageUpload :imageUrl='logo' @changeImageList='changeLogo' />
					</u-form-item>
					<u-form-item label="公司名:" prop="name" borderBottom>
						<u--input v-model="form.name" placeholder="请输入公司名" />
					</u-form-item>
					<!-- 	<u-form-item label="客服链接:" prop="contact" borderBottom>
						<u--textarea v-model="form.contact" placeholder="请输入客服链接,如果没有可不输入" />
					</u-form-item>
					<u-form-item label="企微Id:" prop="work_wechat_id" borderBottom>
						<u--input v-model="form.work_wechat_id" placeholder="请输入企微Id,如果没有可不输入" />
					</u-form-item> -->
					<u-form-item label="手机号:" prop="mobile" borderBottom>
						<u--input v-model="form.mobile" placeholder="请输入手机号" />
					</u-form-item>
					<u-form-item label="地址:" prop="address" borderBottom>
						<view class="inputBox"  @click='map'>{{form.address?form.address:'请输入地址'}}</view>
					</u-form-item>
					<u-form-item label="公司介绍:" prop="description" borderBottom>
						<u--textarea v-model="form.description" placeholder="请输入公司介绍" />
					</u-form-item>
					<u-form-item label="详细介绍:" prop="introduction" borderBottom>
						<view class="footerPopup">
							<view @click="list">
								<u-icon name="list" color="#101010" size="40rpx"></u-icon>
							</view>
							<view @click="list_dot">
								<u-icon name="list-dot" color="#101010" size="40rpx"></u-icon>
							</view>
							<view @click="img">
								<u-icon name="photo" color="#101010" size="40rpx"></u-icon>
							</view>
						</view>
						<editor id="editor" class="ql-container" placeholder="请输入详细介绍" @ready="onEditorReady"></editor>
					</u-form-item>
				</u--form>
			</scroll-view>
		</view>
		<u-button v-if="!loading" :disabled='disabled' text="保存" color=" #3975c6" @click='submit'></u-button>
	</view>
</template>

<script>
	import imageUpload from '@/components_company/imageUpload.vue'
	export default {
		components: {
			imageUpload,
		},
		data() {
			return {
				chooseLocation: null,
				editorCtx: null,
				background: [],
				logo: [],
				disabled: false,
				loading: true,
				form: {
					coordinates: null,
					background: '',
					contact: "",
					work_wechat_id: "",
					name: '',
					logo: '',
					description: '',
					mobile: '',
					address: '',
					introduction: ''
				},
				rules: {
					'background': {
						type: 'string',
						required: true,
						message: '请上传背景图',
						trigger: ['blur', 'change']
					},
					'logo': {
						type: 'string',
						required: true,
						message: '请上传logo',
						trigger: ['blur', 'change']
					},
					'mobile': {
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					'name': {
						type: 'string',
						required: true,
						message: '请输入公司名',
						trigger: ['blur', 'change']
					},
					'description': {
						type: 'string',
						required: true,
						message: '请输入公司介绍',
						trigger: ['blur', 'change']
					},
					'address': {
						type: 'string',
						required: true,
						message: '请输入地址',
						trigger: ['blur', 'change']
					},
					'introduction': {
						type: 'string',
						required: true,
						message: '请输入详细介绍',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onShow() {
			this.chooseLocation = requirePlugin('chooseLocation');
			const location = this.chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
			if(location){
				this.form.address = location.address + location.name
				this.form.coordinates = {
					lat: location.latitude,
					lng: location.longitude
				}
			}
			

		},
		onUnload() {
			// 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
			this.chooseLocation.setLocation(null);
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...'
			})
			this.$api_company.Shop.Detail().then(res => {
				const {
					coordinates,
					address,
					background,
					contact,
					work_wechat_id,
					logo,
					mobile,
					name,
					description,
					introduction
				} = res.data.company
				this.form = {
					coordinates,
					address,
					background,
					contact,
					work_wechat_id,
					name,
					logo,
					description,
					mobile,
					introduction
				}
				uni.hideLoading()
				this.loading = false
				this.background = [{
					upload: true,
					id: background,
					url: background,
					coverUrl: background,
				}]
				this.logo = [{
					upload: true,
					id: logo,
					url: logo,
					coverUrl: logo,
				}]
				setTimeout(() => {
					this.$refs.uForm.setRules(this.rules)
				}, 500)
			}).catch(err => {
				uni.hideLoading()
				uni.$u.toast(err.message)
			})
		},
		methods: {
			map() {
				const key = '5P7BZ-I74RV-QYBPH-5J6M4-QGZF5-RIBAN'; //使用在腾讯位置服务申请的key
				const referer = 'wx85b31333edc40591' //调用插件的app的名称
				if (this.form.coordinates) {
					const location = JSON.stringify({
						latitude:this.form.coordinates.lat,
						longitude: this.form.coordinates.lng
					});
					
					uni.navigateTo({
						url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer +
							'&location=' + location
					});
					return
				}
				wx.getLocation({
					success: (res) => {
						const location = JSON.stringify({
							latitude: res.latitude,
							longitude: res.longitude
						});

						uni.navigateTo({
							url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer +
								'&location=' + location
						});
					},

				})


			},
			submit() {
				this.editorCtx.getContents({
					success: (res) => {
						this.form.introduction = res.html
						this.$refs.uForm.validate().then(res => {
							this.disabled = true
							uni.showLoading({
								title: '更新中...'
							})
							this.$api_company.Shop.Update(this.form).then(res => {
								uni.hideLoading()
								uni.$u.toast('更新成功')
								this.$utils.back()
							}).catch(err => {
								uni.hideLoading()
								this.disabled = false
								uni.$u.toast(err.message)
							})


						}).catch(errors => {
							uni.$u.toast('请输入完整信息')
						})
					}
				})

			},
			changeBack(e) {
				if (e.length) {
					this.background = e
					this.form.background = e[0].url
				} else {
					this.background = e
					this.form.background = null
				}
			},
			changeLogo(e) {
				if (e.length) {
					this.logo = e
					this.form.logo = e[0].url
				} else {
					this.logo = e
					this.form.logo = null
				}
			},
			onEditorReady() {
				uni.createSelectorQuery().select('.ql-container').context((res) => {
					this.editorCtx = res.context
					this.editorCtx.setContents({
						html: this.form.introduction
					})
				}).exec()
			},
			list() {
				this.editorCtx.format('list', 'ordered')
			},
			list_dot() {
				this.editorCtx.format('list', 'bullet')
			},
			img() {
				const that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {

						that.upload(JSON.stringify(res.tempFilePaths))
					}
				});


			},
			upload(file) {
				const that = this
				uni.showLoading({
					title: '上传中'
				})
				let url = file.substring(2, file.length - 2)
				uni.uploadFile({
					url: this.$config.url+'/company/api/media/image/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					header: {
						'Authorization': "Bearer " + uni.getStorageSync('token')
					},
					success: (res) => {
						const data = JSON.parse(res.data).data.image
						that.editorCtx.insertImage({
							src: data.url
						})
						uni.hideLoading()
					},
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 0 40rpx;
		height: 100vh;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		/* 兼容 iOS 设备 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background-color: #fff;
	}

	.body {
		flex: 1;
		overflow: hidden;
	}

	.footerPopup {
		height: 100rpx;
		display: flex;
		align-items: center;
		width: 100vw;
		box-sizing: border-box;

		>view {
			margin-right: 20rpx;
		}
	}

	.ql-container {
		width: calc(100vw - 80rpx);
		min-height: 1000rpx;
	}
</style>